@use '../../../../manga-reader-common';

// Overrides for reverse
.image-container {
    height: calc(100vh); // override as on single, we -34px for the potential scrollbar
    
    &.reverse {
        overflow: unset;
        display: flex;
        align-content: center;
        justify-content: center;
        flex-direction: row-reverse;

        img {
            margin: unset;
        }
    }

    #image-1 {
        &.double {
            margin: 0 0 0 auto;
        }
    }

    #image-2 {
        &.double {
            margin: 0 auto 0 0;
        }
    }
}

.image-container.full-height {
    display: inline-block;
}

.full-width {
    width: 100%;
    margin: 0 auto;
    vertical-align: top;
    max-width: fit-content;

    &.double {
        width: 50%;

        &.cover {
            width: 100%;
        }
    }
}

.center-double {
    display: flex;
    overflow: unset;
}

.fit-to-width-double-offset {
    max-width: 100%; // max-width fixes center alignment issue
}

.original-double-offset {
    max-width: 100%;
}

.fit-to-height-double-offset {
    height: 100vh;
    object-fit: scale-down;
    top: 50%;
    left: 50%;
    max-width: 100%;
}
